<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/vant.css" />
    <link rel="stylesheet" href="./css/katex.min.css">
  </head>

  <body>
    <div id="content" v-cloak>
      <div class="tm-tip" v-if="hintVosList.length > 0">
        <transition-group tag="div" name="fade-transform" mode="out-in" appear>
          <div
            class="tm-tip-item"
            v-for="(item, index) in hintVosList"
            :key="item.id"
          >
            <div
              class="tm-tip-item-header"
              :class="{'not-first-tip-header': index > 0}"
            >
              <img src="./images/tip.png" alt="" />
              <span>提示{{index+1}}</span>
            </div>

            <div class="tm-tip-item-content">
              <div v-html="item.hint"></div>
            </div>
          </div>
        </transition-group>
      </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/validate.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/rem.js"></script>
    <script src="./js/utils.js"></script>
    <script>
      const parentWindowParams = urlParamsToObject(window.location.search);

      const instance = axios.create({
        timeout: 30 * 1000,
        // baseURL: "http://prod.xiaobaishuxue.cn/xhqh-math-api",
        baseURL: "http://111.230.46.179:9876/xhqh-math-api",
      });

      instance.interceptors.request.use(
        (config) => {
          config.headers = config.headers || {
            "Content-Type": "application/json",
          };
          const { token } = parentWindowParams;
          if (token) {
            config.headers.token = `${token}`;
          }

          return config;
        },
        (error) => {
          Promise.reject(error);
        }
      );

      const API = {
        getById: "/question/getById",
      };

      // 根据id获取详情
      function getById(id) {
        return instance.get(API.getById, { params: { questionId: id } });
      }

      function onClickKnowlege(id, chapterId) {
        app.$options.methods.getZsdInfo(id, chapterId);
      }

      const app = new Vue({
        el: "#content",
        data: {
          // 提示列表
          hintVosList: [],
          replaceFontToP
        },
        mounted() {
          if (parentWindowParams.id && parentWindowParams.token) {
            this.initDataSource(Number.parseInt(parentWindowParams.id));
          }
        },
        methods: {
          async initDataSource(id) {
            const res = await getById(id);
            if (res.data && res.data.code === 200) {
              const {
                data: { data },
              } = res;
              const result = data.hintVosList;
              result.forEach(item => {
                item.hint = this.replaceFontToP(item.hint)
              })
              this.hintVosList = result
              console.log("result :>> ", result);
            }
          },
          getZsdInfo(id, chapterId) {
            console.log("id, chapterId :>> ", id, chapterId);
            OnClickKnowledge.postMessage(
              JSON.stringify({
                knowledgeId: id,
                chapterId,
              })
            );
          },
        },
      });
    </script>
  </body>
</html>
